<template>
  <Form ref="formRef" :model="formData" :rules="rules" :label-width="120">
    <FormItem label="设备级别：" prop="deviceLevel">
      <Select
        v-model="formData.deviceLevel"
        @on-change="onDeviceLevelChange"
        placeholder="请选择设备级别..."
      >
        <Option
          v-for="item in deviceLevelList"
          :value="item.id"
          :key="item.value"
          :label="item.name"
        />
      </Select>
    </FormItem>
    <!-- 二级表 deviceLevel===2 -->
    <FormItem label="上级设备：" prop="deviceParent" v-if="deviceLevel === 2">
      <Select v-model="formData.deviceParent" placeholder="请选择设备级别...">
        <Option
          v-for="item in deviceLevelFirst"
          :value="item.id"
          :key="item.value"
          :label="item.name"
        />
      </Select>
    </FormItem>
    <!-- 三级表 deviceLevel===3-->
    <FormItem label="上级设备：" prop="deviceParent" v-if="deviceLevel === 3">
      <Row>
        <Col span="11">
          <!-- 变压器列表 -->
          <Select v-model="parent1" @on-change="onParent1Change">
            <Option
              v-for="item in deviceLevelFirst"
              :value="item.id"
              :key="item.id"
              :label="item.name"
            />
          </Select>
        </Col>
        <Col span="2" style="text-align:center;">-</Col>
        <Col span="11">
          <!-- 二级表列表 -->
          <Select
            v-model="formData.deviceParent"
            placeholder="请选择设备级别..."
          >
            <Option
              v-for="item in deviceLevelSecond"
              :value="item.id"
              :key="item.id"
              :label="item.name"
            />
          </Select>
        </Col>
      </Row>
    </FormItem>
    <!-- 四级表 deviceLevel==4 -->
    <FormItem label="上级设备：" prop="deviceParent" v-if="deviceLevel === 4">
      <Row>
        <Col span="7">
          <!-- 变压器列表 -->
          <Select v-model="parent1" @on-change="onParent1Change">
            <Option
              v-for="item in deviceLevelFirst"
              :value="item.id"
              :key="item.id"
              :label="item.name"
            />
          </Select>
        </Col>
        <Col span="1" style="text-align:center;">-</Col>
        <Col span="7">
          <!-- 二级表列表 -->
          <Select
            v-model="parent2"
            placeholder="请选择设备级别..."
            @on-change="onParent2Change"
          >
            <Option
              v-for="item in deviceLevelSecond"
              :value="item.id"
              :key="item.id"
              :label="item.name"
            />
          </Select>
        </Col>
        <Col span="1" style="text-align:center;">-</Col>
        <Col span="7">
          <!-- 三级表列表 -->
          <Select
            v-model="formData.deviceParent"
            placeholder="请选择设备级别..."
          >
            <Option
              v-for="item in deviceLevelThird"
              :value="item.id"
              :key="item.id"
              :label="item.name"
            />
          </Select>
        </Col>
      </Row>
    </FormItem>

    <!-- 基本参数 -->
    <FormItem label="采集频率(分钟)：" prop="rate">
      <InputNumber
        v-model="formData.rate"
        placeholder="请输入采集频率..."
        style="width:100%;"
        :disabled="collectRateDisabeld"
      />
    </FormItem>

    <FormItem label="相线CT：" prop="ct">
      <InputNumber
        v-model="formData.ct"
        placeholder="请输入相线CT..."
        style="width:100%;"
      />
    </FormItem>
    <FormItem label="零线CT：" prop="lct">
      <InputNumber
        v-model.trim="formData.lct"
        placeholder="请输入零线CT..."
        style="width:100%;"
      />
    </FormItem>
    <FormItem label="相线PT：" prop="pt">
      <InputNumber
        v-model="formData.pt"
        placeholder="请输入PT..."
        style="width:100%;"
      />
    </FormItem>
    <FormItem
      label="软件计算："
      prop="calculateStatus"
      v-if="deviceLevel !== 4"
    >
      <i-switch v-model="formData.calculateStatus">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>

    <FormItem label="是否接入零线：" prop="lineToZeroLine">
      <i-switch v-model="formData.lineToZeroLine">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </i-switch>
    </FormItem>

    <FormItem
      label="零线设备显示："
      prop="showZeroLine"
      v-if="!formData.lineToZeroLine"
    >
      <i-switch v-model="formData.showZeroLine">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </i-switch>
    </FormItem>

    <FormItem
      label="零线设备名称："
      prop="childDeviceName"
      v-if="formData.showZeroLine && !formData.lineToZeroLine"
    >
      <Input
        v-model="formData.childDeviceName"
        placeholder="请输入零线设备名称..."
        clearable
      />
    </FormItem>

    <FormItem label="断路功能：" prop="disconState">
      <i-switch v-model="formData.disconState">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>
    <FormItem label="是否启用：" prop="enable">
      <i-switch v-model="formData.enable">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>
    <FormItem label="温度开关：" prop="temp">
      <i-switch v-model="formData.temp">
        <span slot="open">On</span>
        <span slot="close">Off</span>
      </i-switch>
    </FormItem>
  </Form>
</template>
<script>
import {
  getParentDeviceList,
  getGatewayList as httpGetGatewayList
} from "@/api";
import { generateRules, deviceLevelList } from "../utils";
export default {
  mounted() {
    this.init();
  },
  props: {
    form: {
      type: Object,
      default: new Object()
    },
    collectType: String
  },
  watch: {
    form: {
      deep: true,
      handler(value, oldValue) {
        if (!(JSON.stringify(value) === JSON.stringify(oldValue))) {
          this.init();
        }
      }
    }
  },
  data() {
    return {
      deviceLevel: 1,
      parent1: null,
      parent2: null,
      deviceLevelList: [...deviceLevelList],
      deviceLevelFirst: [],
      deviceLevelSecond: [],
      deviceLevelThird: [],
      gatewayPortList: [],
      formData: {
        deviceLevel: 1,
        rate: 15,
        ct: "",
        lct: "",
        pt: "",
        disconState: false,
        enable: false,
        calculateStatus: false,
        deviceParent: "",
        temp: true,

        lineToZeroLine: false,
        showZeroLine: false,
        childDeviceName: ""
      },
      collectRateDisabeld: false,
      rules: generateRules()
    };
  },

  methods: {
    init() {
      if (JSON.stringify(this.form) === "{}") return;
      if (this.collectType === "wang-guan") {
        this.getGatewayTypeList();
      }
    },

    getGatewayTypeList() {
      const { collectType, companyId, port } = this.form;
      const params = { desCode: collectType, companyId };
      httpGetGatewayList(params).then(res => {
        const item = res.data.find(t => t.port === port);
        if (item) {
          const rate = item.collectPeriod;
          this.collectRateDisabeld = true;
          this.formData.rate = rate;
        }
      });
    },

    // 设备等级change
    onDeviceLevelChange(id) {
      this.deviceLevel = id;
      this.$refs.formRef.resetFields();

      this.formData.deviceLevel = id;
      this.formData.pt = "";
      this.formData.rate = 15;
      this.formData.ct = "";
      this.formData.lct = "";
      this.formData.pt = "";
      this.formData.calculateStatus = false;
      this.formData.disconState = false;
      this.formData.enable = false;

      // 设备级别为变压器不需要获取列表
      // 如果id为4 手动置空二级表和三级表的列表和选中的参数
      if (id === 1) {
        return false;
      } else if (id === 3) {
        this.parent1 = null;
      } else if (id === 4) {
        this.deviceLevelSecond = []; // 二级表列表
        this.deviceLevelThird = []; // 三级表列
        this.parent1 = null;
        this.parent2 = null;
        this.formData.deviceParent = null;
      }

      // 设备类型为非变压器需要获取变压器列表
      const params = {
        companyId: this.form.companyId,
        level: 1,
        parentId: null
      };
      this.formData.deviceParent = null;
      getParentDeviceList(params).then(res => {
        if (res.code === 200) {
          this.deviceLevelFirst = res.data;
        } else {
          this.deviceLevelFirst = [];
        }
      });
    },

    // 变压器change
    onParent1Change(parentId) {
      if (!parentId) {
        return false;
      }
      const vm = this;
      this.formData.deviceParent = null;
      const params = {
        companyId: vm.form.companyId,
        level: 2,
        parentId
      };
      this.parent2 = "";

      if (vm.formData.deviceLevel === 4) {
        this.deviceLevelThird = [];
      }
      getParentDeviceList(params).then(res => {
        if (res.code === 200) {
          this.deviceLevelSecond = res.data;
        } else {
          this.deviceLevelSecond = [];
        }
      });
    },

    // 二级表列表 change
    // 二级表 change 获取三级表
    onParent2Change(parentId) {
      if (!parentId) return false;
      const vm = this;
      const params = {
        companyId: vm.form.companyId,
        level: 3,
        parentId
      };
      this.formData.deviceParent = null;
      getParentDeviceList(params).then(res => {
        if (res.code === 200) {
          this.deviceLevelThird = res.data;
        } else {
          this.deviceLevelThird = [];
        }
      });
    },

    validate(callback) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          callback(valid, {
            formData: Object.assign({}, this.form, this.formData)
          });
        }
      });
    }
  }
};
</script>
